<template>
  <div class="home-card">
    <div v-if="header" class="header-title clear-fix flex-not-shrink">
      <div class="title">
        <i :class="['home-card-icon', icon]"></i>
        {{ title }}
        <ElBadge v-if="badge > 0" type="warning" :value="badge" />
      </div>
      <div class="more">
        <slot name="header-right"></slot>
      </div>
    </div>
    <div :class="['home-card-body', bodyClass]">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HomeCard',
    props: {
      header: {
        type: Boolean,
        default: true
      },
      title: {
        type: String,
        default: ''
      },
      icon: {
        type: String,
        default: ''
      },
      bodyClass: String,
      badge: Number
    }
  }
</script>

<style lang="scss">
  .home-card {
    @include flex-not-shrink;
    @include flex-column;
    height: 100%;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 6px #dde1ea;

    .header-title {
      height: 45px;
      padding: 0 10px;
      overflow: hidden;
      line-height: 45px;

      .home-card-icon {
        color: var(--color-primary);
        font-size: 18px;
      }

      .title {
        float: left;
        font-weight: bold;
        font-size: 16px;
      }

      .more {
        float: right;
        color: #8f8f8f;
        white-space: nowrap;
        cursor: pointer;

        &:hover {
          color: var(--color-primary);
        }
      }
    }

    .home-card-body {
      @include flex-item;
      overflow: auto;
    }

    .el-badge {
      vertical-align: -5px;
    }

    .el-badge__content--warning {
      font-weight: normal;
      background: #ffb458;
      border: 0;
    }
  }
</style>
